<template>
  <a-modal
    @cancel="close"
    :title="`编辑${form.insureKind == 0 ? '交强险' : '商业险'}`"
    width="75vw"
    :visible="visible"
    unmount-on-close
    body-class="insure-edit-modal-body"
    body-style="max-height: calc(100vh - 160px);"
  >
    <!-- 交强险 -->
    <div class="insure-edit-content">
      <a-spin :loading="fetchIng" tip="加载中...">
        <page-form :model="form" ref="formRef" layout="vertical">
          <compulsory-item v-if="form.insureKind == 0" :info="form" popupContainer=".insure-edit-modal-body" operateType="editInsure" />
          <!-- 商业险 -->
          <business-item v-if="form.insureKind == 1" :info="form" popupContainer=".insure-edit-modal-body" operateType="editInsure" />
        </page-form>
      </a-spin>
    </div>
    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" :loading="okLoading" @click="saveFn">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup name="InsureEditModal">
  import { ref } from 'vue'
  import { isValid } from '@/utils'
  import compulsoryItem from '@/views/assets/operation/car-insure/components/insurance-policy/compulsory-item.vue'
  import businessItem from '@/views/assets/operation/car-insure/components/insurance-policy/business-item.vue'
  import { carInsuranceDetail, editInsure } from '@/api/asset/carInsure.js'
  import { Message } from '@arco-design/web-vue'
  // emit 事件
  const emit = defineEmits(['ok'])
  const visible = ref(false)
  // 修改
  const form = ref({})
  const fetchIng = ref(false)
  const open = (record) => {
    form.value = {
      insureKind: record.insureKind,
    }
    visible.value = true
    fetchIng.value = true
    carInsuranceDetail({ id: record.id }).then((res) => {
      fetchIng.value = false
      const result = res.result
      // 组合 dateRange
      result.dateRange = [result.beginDate, result.endDate]
      // 商业险需要处理 carInsureDetail 默认有一条
      let insureKind = result.insureKind
      if (insureKind == 1) {
        let carInsureDetail = result.carInsureDetail
        if (!carInsureDetail || carInsureDetail.length == 0) {
          result.carInsureDetail = [{}]
        }
      }
      // 处理商业险
      form.value = result
    })
  }
  // 关闭
  const close = () => {
    visible.value = false
    okLoading.value = false
    fetchIng.value = false
  }
  // 保存
  const formRef = ref()
  const okLoading = ref(false)
  const saveFn = () => {
    formRef.value.validate((error) => {
      if (!error) {
        const param = {
          ...form.value,
        }
        // 处理 carInsureDetail 投保信息
        let carInsureDetail = JSON.parse(JSON.stringify(param.carInsureDetail))
        if (carInsureDetail?.length > 0) {
          for (var i = 0; i < carInsureDetail.length; i++) {
            let item = carInsureDetail[i]
            let { insureKindType, insuredSum, insureAmt } = item
            if (!isValid(insureKindType) && !isValid(insuredSum) && !isValid(insureAmt)) {
              carInsureDetail.splice(i, 1)
              i--
            }
          }
        }
        param.carInsureDetail = carInsureDetail
        okLoading.value = true
        editInsure(param)
          .then(() => {
            close()
            Message.success('保存成功')
            emit('ok')
          })
          .finally(() => {
            okLoading.value = false
          })
      }
    })
  }
  defineExpose({
    open,
  })
</script>
<style lang="less" scoped>
  .insure-edit-content {
    overflow-x: hidden;
  }
</style>
